<template>
  <div class="detailAudio">
    <Header :title="MainTitle" path="/home" type="detailAaudio"></Header>
    <keep-alive>
      <aplayer :audio="audio" :lrcType="1" @pause="pause" @loadeddata="loadeddata" ref="aplayer" />
    </keep-alive>
    <div class="icon">
      <img src="@/assets/images/other/prev.png" @click="prev" />
      <div class="playIcon">
        <img src="@/assets/images/other/play.png" @click="play" v-if="playState === 'display'" />
        <img src="@/assets/images/other/pause.png" @click="play" v-else />

      </div>
      <img src="@/assets/images/other/next.png" @click="next" />
    </div>
    <h4>作品简介</h4>
    <article>

      沈君死了八百年，复活后发现自己的弟子们居然都成了顶尖大佬？
      各行各业竟被自己的弟子们垄断了？系统温馨提示：图鉴未满
      ，速去集齐八十一位弟子，否则系统将与你同归于尽哦。沈君灵魂一抖，
      嘴角抽笑，徒儿们，快让师父抱抱大腿！
    </article>
    <DetailBottom :number="num" detail-type="detailAaudio" :id="id"></DetailBottom>

  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import DetailBottom from "@/components/DetailBottom.vue";
import { Toast } from "mint-ui";
export default {
  name: "detailAudio",
  data() {
    return {
      num: 8,
      id: '',
      obj: {},
      dataType: '',
      playTime: 0,
      aplayer: null,
      playState: 'display',
      MainTitle: "音频播放",
      dataSource: '',
      media: '',
      userId: 0,

      audio: {
        name: "",
        cover: '',
        url: '',
        artist: '',
        lrc: '',
      },
    };
  },
  mounted() {
    const userInfo = this.$store.state.userInfo;
    if (userInfo) {
      this.userId = userInfo.id;
      const dataType = this.$route.params.dataType;
      this.dataType = dataType;
      this.aplayer = this.$refs.aplayer;
      const id = this.$route.params.id;
      this.id = id;
      //记录播放了多久
      const { media } = this.aplayer;
      this.media = media;
      //历史记录返回继续节点播放
      this.playTime = this.$route.params.playTime;

      this.$axios.get("getAudioId", { params: { id } }).then((rs) => {
        this.audio = { ...this.audio, url: rs.url, name: rs.title, cover: rs.smallSrc };

      });
    } else {


      this.$store.state.homeIndex = 'home5';
      this.$router.push('/home');
      Toast('请先登录')
    }

  },
  destroyed() {
    const userInfo = this.$store.state.userInfo;
    //离开详情页记录播放了多久(>30s记录)
    if (userInfo) {
      this.userId = userInfo.id;
      const playTime = parseInt(this.media.currentTime);

      if (playTime > 30) {
        const json = {};
        json.playTime = playTime;
        json.dataType = this.dataType;
        json.userId = this.$store.state.userInfo.id;
        json.audioId = this.id;
        json.title = this.audio.name;
        const params = { params: json }
        this.$axios.get('addRecord', params).then(rs => {
          console.log(rs);
        })
      }
    } else {

      this.$store.state.homeIndex = 'home5';
      this.$router.push('/home');
      Toast('请先登录')

    }

  },
  methods: {
    loadeddata() {
      this.aplayer.seek(this.playTime);
    },
    prev() {
      this.$axios.get(`getAudioPrev?id=${this.id}&dataType=${this.dataType}`)
        .then((rs) => {
          if (rs) {
            this.id = rs.id + ''
            this.audio = { ...this.audio, url: rs.url, name: rs.title, cover: rs.smallSrc };


          } else {
            Toast("已经是第一节音频了！");
          }

        })
    },
    pause() {
      this.playState = 'display'
    },
    next() {
      this.$axios.get(`getAudioNext?id=${this.id}&dataType=${this.dataType}`)
        .then((rs) => {
          if (rs) {
            this.id = rs.id + ''
            this.audio = { ...this.audio, url: rs.url, name: rs.title, cover: rs.smallSrc };


          } else {
            Toast("已经是最后一节音频了！");
          }


        })
    },
    play() {
      this.aplayer.toggle();
      this.playState = ""
    },
  },
  components: {
    Header,
    DetailBottom,
  },
};
</script>
<style lang="less" scoped>
div.detailAudio {
  padding: 40px 5px;

  div.icon {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;

    img {
      width: 30px;
      height: 30px;
    }
  }

  h4 {
    text-indent: 2em;
  }

  article {
    text-indent: 2em;
    font-size: 14px;
  }
}
</style>